<template>
  <view class="success-container">
    <!-- 成功图标 -->
    <view class="success-icon">
      <u-icon name="checkmark-circle-fill" color="#03B8CD" size="120" ></u-icon>
    </view>

    <!-- 成功标题 -->
    <view class="success-title">
      提交成功
    </view>

    <!-- 提示信息 -->
    <view class="success-message">
      <!-- 预计48小时内完成审核，通过后即可登录 -->
	  <u-notice-bar :list="list"  :volume-icon="true"></u-notice-bar>
    </view>

    <!-- 返回按钮 -->
    <view class="button-wrapper">
      <u-button 
        type="primary" 
        @click="handleBack"
        shape="circle"
				:custom-style="btuStyle"
      >
        返回
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data(){
	  return{
			btuStyle: {
				"backgroundColor": "#03B8CD",
				"color": "#ffffff"
			},
			list: ["预计48小时内完成审核，通过后即可登录"]
		  
	  }
  },
  methods: {
    // 返回首页或指定页面,提交完成返回登录页面
    handleBack() {
      // uni.switchTab({
      //   url: '/pages/login/login' // 根据实际路由调整
      // });
			uni.navigateTo({
				url: '/pages/login/login'
			});	
    }
  }
}
</script>

<style lang="scss" scoped>
.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  height: 100vh;
  padding-top: 80rpx;
  text-align: center;
  background-color: #F1F7F7;

  .success-icon {
		
    margin: 40rpx 0;
    /deep/ .u-icon {
      animation: bounceIn 0.5s;
    }
  }

  .success-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 30rpx;
  }

  .success-message {
    font-size: 32rpx;
    color: #666666;
    margin-bottom: 80rpx;
    line-height: 1.6;
    max-width: 80%;
  }

  .button-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  // 此样式主要为了适配wx小程序的按钮
  /deep/ .u-size-default{
  	width: 150px;
  }
}

/* 动画效果 */
@keyframes bounceIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>